//颜色配置
@LightBG: rgb(235, 230, 225);
@DarkBG : rgb(40, 45, 50);

@LightFont: #666;
@DarkFont : #DDD;

@LightOther: rgb(255, 165, 85);
@DarkOther : rgb(85, 165, 255);

@BtnColor: #FFF;

@LightNotFrost: rgb(245, 240, 235);
@DarkNotFrost : rgb(70, 75, 80);

@LightFrostedBG: rgba(255, 250, 245, 0.5);
@DarkFrostedBG : rgba(100, 105, 110, 0.5);

//通用配置

//日间模式
.Light {
    color: @LightFont;

    a,
    p:not(.exclamation, .notename) {
        color: @LightFont;
    }

    #back {
        color: @LightFont;
    }

    .ops {
        a:hover {
            border-bottom: 0.1rem solid @LightOther;
        }

        .ops-in {
            background-color: @LightOther;
        }
    }

    #cardbox {
        background: @LightFrostedBG;

        #ToBlogBtn {
            background: @LightOther;
        }
    }

    header {
        background: @LightFrostedBG;

        #ApplyBtn:hover,
        #Switchbox:hover {
            border-bottom: 0.1rem solid @LightOther;
        }
    }

    #love,
    #info,
    #url,
    #addurl,
    #controls,
    #notestag,
    #markdown,
    ul#tagList li {
        background: @LightFrostedBG;
    }

    #container {

        .modename,
        .pagemode {
            background: @LightFrostedBG;
        }
    }

    .notetag {
        background-color: @LightOther;
    }

    .modeSwitch {
        transform: rotateY(0deg);
    }

    .dynamic {
        background: @LightFrostedBG;
    }

    .modecard,
    .classification {
        background: @LightFrostedBG;
    }

    .friendBtn {
        a {
            background-color: @LightOther;
        }
    }

    #toggle {
        background: @LightOther;
    }

    input[type=range] {
        background      : linear-gradient(#F6F0EA, #F6F0EA) no-repeat;
        background-color: @LightOther;
    }

    input[type=range]::-moz-range-progress {
        background      : linear-gradient(#F6F0EA, #F6F0EA) no-repeat;
        background-color: @LightOther;
    }

    #FriendForm,
    #confirm {
        background: @LightBG;
    }

    .select {
        background: @LightOther;
    }

    #switchForm,
    #msgpreview {
        background: @LightFrostedBG;
    }

    input[type=button],
    .agree {
        background: @LightOther;
    }

    .confirmBtn {
        background: @LightOther;
    }

    #verify,
    .rejected,
    .toread {
        color: @LightOther;
    }

    .Lock input {
        background: #BEC0C1;
    }

    #loginbox {
        background: @LightFrostedBG;
    }

    #myinfobox {
        background: @LightNotFrost;

        input,
        textarea {
            color: @LightFont;
        }

        input:disabled,
        textarea:disabled {
            opacity                : 1;
            -webkit-text-fill-color: @LightFont;
        }

        .modify {
            border-color: #919191 !important;
            background  : @LightBG  !important;
        }
    }

    #infomodify {
        color: @LightOther  !important;
    }

    #prompt,
    #safegate {
        background: @LightNotFrost;
    }

    #release,
    #manage {
        background: @LightBG;
    }

    #dynamictext,
    #musicUrl,
    #load_prompt div {
        background-color: @LightFrostedBG  !important;
        color           : @LightFont  !important;
    }

    #clearUrl {
        background-color: @LightFrostedBG  !important;

        p {
            color: @LightOther;
        }
    }

    #menu,
    #releaseOption,
    #manageOption {
        background-color: @LightFrostedBG;

        input[type=button] {
            color: @LightFont;
        }
    }

    .songname,
    .notename {
        color: #333;
    }


    .ct-body {
        color: @LightFont  !important;

        h1.title {
            color: #333 !important;
        }

        h1:not(.title),
        a {
            color: @LightOther;
        }

        .markdown-body,
        .markdown-body h2,
        .markdown-body h3,
        .markdown-body h4,
        .markdown-body h5,
        .markdown-body h6 {
            color: @LightFont  !important;
        }

        .markdown-body li code {
            background-color: rgba(255, 165, 85, 0.7) !important;
        }

        pre {
            background-color: @LightBG  !important;
        }

        code {
            color: @LightFont  !important;
        }

        span.punctuation {
            color: @LightFont  !important;
        }

        a.tag.is-link.is-light {
            background-color: @LightOther  !important;
        }
    }
}

//夜间模式
.Dark {
    color: @DarkFont;

    .ct-body {
        color: @DarkFont  !important;

        h1.title {
            color: #EEE !important;
        }

        h1:not(.title),
        a {
            color: @DarkOther;
        }

        .markdown-body,
        .markdown-body h2,
        .markdown-body h3,
        .markdown-body h4,
        .markdown-body h5,
        .markdown-body h6 {
            color: @DarkFont  !important;
        }

        .markdown-body li code {
            background-color: rgba(85, 165, 255, 0.7) !important;
        }

        pre {
            background-color: @DarkBG  !important;
        }

        code {
            color: @DarkFont  !important;
        }

        span.punctuation {
            color: @DarkFont  !important;
        }

        a.tag.is-link.is-light {
            background-color: @DarkOther  !important;
        }
    }

    #back {
        color: @DarkFont;
    }

    a,
    p:not(.exclamation, .notename) {
        color: @DarkFont;
    }

    .ops {
        a:hover {
            border-bottom: 0.1rem solid @DarkOther;
        }

        .ops-in {
            background-color: @DarkOther;
        }
    }

    #cardbox {
        background: @DarkFrostedBG;

        #ToBlogBtn {
            background: @DarkOther;
        }
    }

    header {
        background: @DarkFrostedBG;

        #ApplyBtn:hover,
        #Switchbox:hover {
            border-bottom: 0.1rem solid @DarkOther;
        }
    }

    #love,
    #info,
    #url,
    #addurl,
    #controls,
    #notestag,
    #markdown,
    ul#tagList li {
        background: @DarkFrostedBG;
    }

    #container {

        .modename,
        .pagemode {
            background: @DarkFrostedBG;
        }
    }

    .notetag {
        background-color: @DarkOther;
    }

    .modeSwitch {
        transform: rotateY(180deg);
    }

    .dynamic {
        background: @DarkFrostedBG;
    }

    .modecard,
    .classification {
        background: @DarkFrostedBG;
    }

    .friendBtn {
        a {
            background-color: @DarkOther;
        }
    }

    #toggle {
        background: @DarkOther;
    }

    input[type=range] {
        background      : linear-gradient(#F6F0EA, #F6F0EA) no-repeat;
        background-color: @DarkOther;
    }

    input[type=range]::-moz-range-progress {
        background: linear-gradient(#F6F0EA, #F6F0EA) no-repeat;
    }

    #FriendForm,
    #confirm {
        background: @DarkBG;
    }

    .select {
        background: @DarkOther;
    }

    #switchForm,
    #msgpreview {
        background: @DarkFrostedBG;
    }

    input[type=button],
    .agree {
        background: @DarkOther;
    }

    .confirmBtn {
        background: @DarkOther;
    }

    #verify,
    .rejected,
    .toread {
        color: @DarkOther;
    }

    .Lock input {
        background: #F9F7F6;
    }

    #loginbox {
        background: @DarkFrostedBG;
    }

    #myinfobox {
        background: @DarkNotFrost;

        input,
        textarea {
            color: @DarkFont;
        }

        input:disabled,
        textarea:disabled {
            opacity                : 1;
            -webkit-text-fill-color: @DarkFont;
        }

        .modify {
            border-color: #919191 !important;
            background  : @DarkBG  !important;
        }
    }

    #infomodify {
        color: @DarkOther  !important;
    }

    #prompt,
    #safegate {
        background: @DarkNotFrost;
    }

    #release,
    #manage {
        background: @DarkBG;
    }

    #dynamictext,
    #musicUrl,
    #load_prompt div {
        background-color: @DarkFrostedBG  !important;
        color           : @DarkFont  !important;
    }

    #clearUrl {
        background-color: @DarkFrostedBG  !important;

        p {
            color: @DarkOther;
        }
    }

    #menu,
    #releaseOption,
    #manageOption {
        background-color: @DarkFrostedBG;

        input[type=button] {
            color: @DarkFont;
        }
    }

    .songname,
    .notename {
        color: #FFF;
    }
}